<template>
  <div class="nav">
    <ul>
      <li v-for="(item,index) in menus" v-if="!item.hidden" :key="index">
        <p><a-icon theme="filled" :type="item.meta.icon" /> {{item.meta.title}}</p>
        <router-link v-for="(nav,index) in item.children" v-if="!nav.hidden" :key="index" :class="nav.path == $route.path ? 'active' : ''" :to="nav.path"><span v-if="nav.path == $route.path"></span>{{nav.meta.title}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { asyncRouterMap } from '@/config/router.config'

export default {
  name: 'NavList',
  data () {
    return {
      menus: []
    }
  },
  created () {
    this.menus = asyncRouterMap[0].children
  },
  methods: {}
}
</script>

<style scoped>
.container .main-wrapper .nav {
  float: left;
}
.container .main-wrapper .nav ul {
  padding-top: 38px;
  padding-right: 53px;
}
.container .main-wrapper .nav ul li {
  padding-bottom: 34px;
}
.container .main-wrapper .nav li p {
  font-size: 16px;
  color: #333;
}
.container .main-wrapper .nav li a {
  margin-top: 15px;
  font-size: 14px;
  color: #999;
  display: block;
  height: 12px;
}
.container .main-wrapper .nav li .active {
  color: #e52e3a
}
.container .main-wrapper .nav li .active span {
  display: inline-block;
  height: 12px;
  position: relative;
  top: 1px;
}
.container .main-wrapper .nav li a span {
  border-left: 2px solid #e52e3a;
  padding-right: 12px;
}
</style>
